<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>客户留言</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="" />
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <link href="css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/simplePaging.css">
    <style>
        /*当前页面样式*/
        * {
            margin: 0;
            padding: 0;
        }
        body {
            position: relative;
            font: 14px/1.42857143 'Microsoft YaHei', '微软雅黑', '宋体';
            color: #333;
            background-color: #fff;
            min-width: 1220px;
            max-width: 1920px;
            margin: 0 auto;
        }
    </style>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript">
        function userHead() {
            var num = null;
            var list = document.getElementsByName("imageId");
            var img = null;
            for(var i = 0;i<list.length;i++){
                num =Math.floor(Math.random()*7+1);
                img = "user"+num+".png";
                list[i].src="images/"+img;
            }
        }
    </script>
</head>

<body>
<!-- banner -->
<div class="banner jarallax">
    <div class="banner-dot">
        <div class="header-top">
            <div class="container">
                <div class="header-top-left">
                    <p><i class="fa fa-home" aria-hidden="true"></i> 西永大道 , 重庆沙坪坝</p>
                </div>
                <div class="header-top-right">
                    <p><i class="fa fa-phone" aria-hidden="true"></i> +114514</p>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="container">
                <div class="header-left">
                    <div class="w3layouts-logo">
                        <h1>

                            <a href="/front/indexs">汽车时代</a>
                        </h1>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>

        <div class="header-right about-top">
            <div class="container">
                <div class="top-nav">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <!--navbar-header-->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="/front/indexs" class="active">首页</a></li>
                                <li><a href="/front/about">关于我们</a></li>
                                <li><a href="/front/gallery">汽修产品</a></li>
                                <li class=""><a href="#" class="dropdown-toggle hvr-bounce-to-bottom" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">预约服务<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="hvr-bounce-to-bottom" href="/front/contact">在线预约</a></li>
                                        <li><a class="hvr-bounce-to-bottom" href="#">上门检修</a></li>
                                    </ul>
                                </li>
                                <li><a href="/front/blog">信息中心</a></li>
                                <li class=""><a href="#" class="dropdown-toggle hvr-bounce-to-bottom" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="hvr-bounce-to-bottom" href="/front/recruitment">精英招聘</a></li>
                                        <li><a class="hvr-bounce-to-bottom" href="/front/CustomerMessage">客户留言</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="clearfix"> </div>
                        </div>
                    </nav>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="wthree-heading">
            <h2>消息推送</h2>
        </div>
    </div>
</div>
<!-- //banner -->
<!-- single -->
<div class="blog">
    <div class="container">
        <div class="agile-blog-grids">
            <div class="col-md-8 agile-blog-grid-left">
                <div  class="agile-blog-grid">

                    <div class="response" id="response">
                        <h3>Responses</h3></br>

                    </div>
                    </br>
                    </br>
                    <div class="showPagePaging" style=""></div>
                    </br></br>
                    <div class="opinion">
                        <h3>你的留言能够给我们留下宝贵的财富？写下来吧</h3>
                        <form id="mesForm" method="post" type="validate">
                            <input type="text" name="mesname" placeholder="昵称" required="required">
                            <input type="email" name="mesemail" placeholder="邮箱地址" required="required" valType="MAIL" msg="<font color=red>*</font>邮箱格式不正确">
                            <textarea name="mescontext" placeholder="畅所欲言吧..." required="required"  ></textarea>
                            <input type="button" id="btnSubmit" value="发送" style="background-color: #2ebaef;width: 80px;height: 30px;outline: none;border: 0px;color: white"></input>
                        </form>
                    </div>
                </div>
            </div>

            <div class="clearfix"> </div>
        </div>
    </div>
</div>
<!-- //single -->
<!-- footer -->
<div class="w3-agile-footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-3 footer-grid">
                <div class="footer-grid-heading">
                    <h4>地址</h4>
                </div>
                <div class="footer-grid-info">
                    <p>恒达汽修有限公司
                        <span>地　址：重庆市万州区厦门路602号</span>
                    </p>
                    <p class="phone">电　话：020-5856-1762
                        <span>Email : <a href="mailto:wuhongyacao@outlook.com">wuhongyacao@outlook.com</a></span>
                    </p>
                </div>
            </div>

            <div class="col-md-3 footer-grid">
                <div class="footer-grid-heading">
                    <h4>Follow</h4>
                </div>
                <div class="social">
                    <ul>
                        <li>
                            <a href="javasctipt:void(0)"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="javasctipt:void(0)"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="javasctipt:void(0)"><i class="fa fa-rss"></i></a>
                        </li>
                        <li>
                            <a href="javasctipt:void(0)"><i class="fa fa-vk"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"> </div>

        </div>
        <div class="agileits-w3layouts-copyright">
            <p>Copyright &copy; 2018.Company name All rights reserved.Technical support by Takahashi Wuu</p>
        </div>
    </div>
</div>
<!-- //footer -->
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.poshytip.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jq.validate.js"></script>
<!-- 解决日期格式问题 -->
<script type="text/javascript">
    function formatDate(val) {
        var date = new Date(val);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var h = date.getHours();

        var mm = date.getMinutes();
        if(mm<10){
            mm = "0"+mm;
        }
        return y + '-' + m + '-' + d +' '+h +':'+ mm;
    }
</script>
<script type="text/javascript">
    $(function(e) {

        var vali = new Validators();

        $("#btn").bind("click", vali.subByJs);

    });
</script>
<script type="text/javascript">
    function loadData(page) {
        $("#response").empty();
        $.ajax({
            url: "/front/message/queryList",
            data: {"page": page},
            type: "POST",
            cache: false,
            async: false,
            dataType: "json",
            success: function (data) {
                console.log(data)
                if(data.messages.success){
                    var mes = data.messages.data;
                    for(var i =0 ;i<mes.list.length;i++){
                        var mesObj = mes.list[i];
                        $("#response").append("<div class='media response-info' name='messagesinfo'>" +
                        "<div class='media-left response-text-left'>" +
                        "<a href='#'>" +
                        "<img class='media-object' name ='imageId'  alt=''>" +
                        "</a>" +
                        "<h5 align='center'><a href='#'>"+mesObj.mesname+"</a></h5>" +
                        "</div>" +
                        "<div class='media-body response-text-right'>" +
                        "<p>"+mesObj.mescontext+"</p>" +
                        "<ul>" +
                        "<li>"+formatDate(mesObj.mesdate)+"</li>" +
                        "<li>" +
                        "<a href='/CustomerMessage'>Reply</a>" +
                        "</li>" +
                        "</ul>" +
                        "</div>" +
                        "<div class='clearfix'> </div>" +
                        "</div>");
                    }
                    goalPage = data.messages.data.pages;
                    userHead();
                }

            }

        });
    }
</script>
<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {
            var data1 = $("#mesForm").formSerialize();
            data1= decodeURIComponent(data1,true);
            $.ajax({
                url : "/front/message/addMessage",
                data : data1,
                type : "post",
                cache: false,
                dataType : "json",
                success : function(data) {
                    console.log(data);
                    alert(data[0])
                    $("#mesForm").clearForm();
                    window.location.reload();
                }
            });
        });
    })
</script>
<script src="js/simplePaging.min.js"></script>
<script src="js/simplePaging.js"></script>
<script>
    loadData(1);
    $(".showPagePaging").simplePaging({
        allPage: goalPage,//总页数
        showPage: 5,//显示页数
        startPage: 1,//第一页页码数字
        initPage: 1,//加载完毕自动跳转到第n页(初始化激活页)
        initPageClick:true,//每次页面加载完毕后，是否触发initPage页的绑定事件
        first: "首页",//首页显示字符
        last: "尾页",//尾页显示字符
        prev: "«",//上一页显示字符
        next: "»",//下一页显示字符
        showTurnTo: true,//是否显示跳转按钮，true显示，false不显示
        animateType: "animation",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
        animationTime: 300,//animateType为animation时，动画过渡时间(ms)
        callBack: function (num) {
            loadData(num)
        }
    })
</script>
</body>
</html>
